<template>
  <div>
    <!-- 侧边栏开始 -->
    <div class="float-aside">
      <ul class="float-wrap">
        <li
          v-for="item in sidebarList"
          :key="item.id"
          class="float-wrap-btn"
          @mouseenter="item.customer_show = false"
          @mouseleave="item.customer_show = true"
        >
          <!-- @mouseenter="enter" @mouseleave="leave" -->
          <img
            width="28"
            height="28"
            :src="item.black"
            :alt="item.text"
            v-show="item.customer_show"
          />
          <img
            width="28"
            height="28"
            :src="item.red"
            :alt="item.text"
            v-show="!item.customer_show"
          />
          <span>{{ item.text }}</span>
        </li>

        <!-- <li
          class="float-wrap-btn"
          @mouseenter="mouseChange"
          @mouseleave="mouseChange"
        >
          @mouseenter="enter" @mouseleave="leave"
          <img
            width="28"
            height="28"
            src="@/assets/svg/在线客服黑.svg"
            alt=""
            v-show="customer_show"
          />
          <img
            width="28"
            height="28"
            src="@/assets/svg/在线客服.svg"
            alt=""
            v-show="!customer_show"
          />
          <span>在线客服</span>
        </li> -->
        <!-- <li class="float-wrap-btn">
          <img width="28" height="28" src="@/assets/svg/扫一扫黑.svg" alt="" />
          <img width="28" height="28" src="@/assets/svg/扫一扫红.svg" alt="">
          <span>下载APP</span>
        </li>
        <li class="float-wrap-btn">
          <img width="28" height="28" src="@/assets/svg/评价黑.svg" alt="" />
          <img width="28" height="28" src="@/assets/svg/评价红.svg" alt="">
          <span>浏览评论</span>
        </li> -->
      </ul>
      <ul class="float-wrap back-btn">
        <li
          class="float-wrap-btn"
          id="topBtn"
          v-show="TopBtn"
          @mouseenter="toTop.customer_show = false"
          @mouseleave="toTop.customer_show = true"
        >
          <!--           @mouseenter="toTop.customer_show = false"
          @mouseleave="toTop.customer_show = true" -->
          <img
            width="28"
            height="28"
            :src="toTop.black"
            :alt="toTop.text"
            v-show="toTop.customer_show"
          />
          <img
            width="28"
            height="28"
            :src="toTop.red"
            :alt="toTop.text"
            v-show="!toTop.customer_show"
          />
          <span>回到顶部</span>
        </li>
      </ul>
    </div>
    <!-- 侧边栏结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      sidebarList: [
        {
          id: 1,
          black: require('@/assets/svg/在线客服黑.svg'),
          red: require('@/assets/svg/在线客服.svg'),
          text: '在线客服',
          customer_show: true
        },
        {
          id: 2,
          black: require('@/assets/svg/扫一扫黑.svg'),
          red: require('@/assets/svg/扫一扫红.svg'),
          text: '下载APP',
          customer_show: true
        },
        {
          id: 3,
          black: require('@/assets/svg/评价黑.svg'),
          red: require('@/assets/svg/评价红.svg'),
          text: '浏览评论',
          customer_show: true
        }
      ],
      toTop: {
        id: 4,
        black: require('@/assets/svg/向上黑.svg'),
        red: require('@/assets/svg/向上红.svg'),
        text: '回到顶部',
        customer_show: true
      },
      customer_black: require('@/assets/svg/在线客服黑.svg'),
      Top_show: true,
      TopBtn: false
    }
  },
  methods: {
    mouseChange() {
      this.customer_show = !this.customer_show
    },
    // scrollToTop() {
    //   var scrollTop =
    //     window.pageYOffset ||
    //     window.document.scrollTop ||
    //     document.body.scrollTop
    //   console.log(scrollTop)
    // }
    scrollToTop() {
      // const topBtn = document.getElementById('#topBtn')
      const scrollTop =
        window.pageXOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // const browserHeight = window.outerHeight
      if (scrollTop < 500) {
        // topBtn.style.display = 'block'
        this.TopBtn = false
        //   visibility: hidden;
        // visibility: visible;
      } else {
        // topBtn.style.display = 'none'
        this.TopBtn = true
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  }
}
</script>

<style lang="scss">
/* 侧边栏开启
#topBtn {
  display: none;
}*/
/* 侧边栏开启 */
.float-aside {
  position: fixed;
  /* position: fixed; */
  right: 2vw;
  /* right: 2vw !important; */
  /* left: 20px; */
  bottom: 100px;
  z-index: 11;
  text-transform: none !important;
  /* width: 0; */
}

.float-wrap {
  /* position: fixed!importent; */
  /* right: 2vw; */
  /* bottom: 100px; */
  /* z-index: 11; */
}

.float-aside .float-wrap {
  font-size: 12px;
  padding: 0;
  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 8%);
  /* border-radius: 6px; */
  border-radius: 6px;
  overflow: hidden;
}

.float-wrap-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 68px;
  width: 68px;
  background-color: #fff;
  color: #666;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.2s;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.float-wrap-btn img {
  width: 28px;
  height: 28px;
}

.back-btn {
  opacity: 1;
  pointer-events: auto;
  margin-top: 8px !important;
  display: block;
  overflow: hidden;
  margin-block-start: 8px;
}
</style>
